<template>
  <view class="card-container" :style="{ backgroundColor, height, width, minHeight }">
    <CardTitle :title="title" />
    <view class="content">
      <slot /> 
    </view>
  </view>
</template>

<script setup lang="ts">
  import CardTitle from './CardTitle.vue';
  import { propTypes } from '@/utils/propTypes';
  defineProps({
    /** 卡片标题 */
    title: propTypes.string,
    /** 卡片背景色 */
    backgroundColor: propTypes.string.def('#fff'),
    /** 卡片宽度 */
    width: propTypes.string.def('auto'),
    /** height=auto时, 默认显示高度 */
    minHeight: propTypes.string.def('500rpx'),
    /** 卡片高度 */
    height: propTypes.string.def('auto'),
  });
</script>

<style lang="scss" scoped>
  .card-container {
    padding: 15rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    box-shadow: 0rpx 6rpx 12rpx 2rpx rgba($color: #000, $alpha: 0.16);
    .content {
      margin-top: 40rpx;
      height: min-content;
    }
  }
</style>
